<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>侧边展开导航栏</title>
		<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		ul,
		li {
			list-style: none;
		}
		a {
			text-decoration: none;
		}
		.navbar {
			overflow: hidden;
			position: relative;
			width: 100vw;
		}
		.navbar input {
			display: none;
		}
		.navbar label {
			position: absolute;
			top: 0;
			left: 70px;
			padding-left: 20px;
			width: 100%;
			height: 48px;
			font-size: 30px;
			color: #5a738e;
			background-color: #dedede;
			border: 1px solid #d9dee4;
			cursor: pointer;
			transition: all 0.5s;
		}
		.navbar ul {
			overflow: hidden;
			width: 70px;
			height: 100vh;
			background: #2a3f54;
			transition: all 0.5s;
		}
		.navbar ul li {
			height: 70px;
			margin-bottom: 10px;
		}
		.navbar ul li:first-child {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 10px;
		}
		.navbar ul li:first-child img {
			width: 50px;
			height: 50px;
			border-radius: 50%;
		}
		.navbar ul li:first-child span {
			padding-left: 10px;
			display: none;
			color: #fff;
			white-space: nowrap;
		}
		.navbar ul li a {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			width: 100%;
			height: 100%;
			color: #fff;
		}
		.nvabar ul li a i {
			font-size: 25px;
			margin-bottom: 10px;
		}
		.navbar ul li a span {
			font-size: 10px;
			/* 阻止切换时候的效果 */
			white-space: nowrap;
		}
		.navbar ul li a:hover {
			color: #fff;
			background-color: #35495d;
		}
		.navbar input:checked + label {
			left: 200px;
		}
		.navbar input:checked ~ ul {
			width: 200px;
		}
		.navbar input:checked ~ ul li:first-child {
			justify-content: flex-start;
		}
		.navbar input:checked ~ ul li:first-child span {
			display: block;
		}
		.navbar input:checked ~ ul li a {
			flex-direction: row;
			justify-content: flex-start;
		}
		.navbar input:checked ~ ul li a i {
			font-size: 18px;
			margin: 0 15px;
		}
		.navbar input:checked ~ ul li a span {
			font-size: 13px;
		}
	</style>

	<body>
		<!-- .navabar>input:checkbox[id="checkbox"]+(label[for="checkbox"]>i.fa.fa-bars)+ul>li*6>a>i.fa.fa-+span -->
		<div class="navbar">
			<input type="checkbox" name="" id="checkbox" />
			<label for="checkbox">
				<i class="fa fa-bars"></i>
			</label>
			<ul>
				<li>
					<img src="https://picsum.photos/300/400?random=1" alt="" />
					<span>欢迎您，管理员</span>
				</li>
				<li>
					<a href="javascript:void()"><i class="fa fa-home"></i><span>后台首页</span></a>
				</li>
				<li>
					<a href="javascript:void()"><i class="fa fa-sitemap"></i><span>商品列表</span></a>
				</li>
				<li>
					<a href="javascript:void()"><i class="fa fa-user"></i><span>用户列表</span></a>
				</li>
				<li>
					<a href="javascript:void()"><i class="fa fa-shopping-cart"></i><span>订单列表</span></a>
				</li>
				<li>
					<a href="javascript:void()"><i class="fa fa-windows"></i><span>功能列表</span></a>
				</li>
			</ul>
		</div>
	</body>
</html>
